<template>
  <!-- action：上传图片的服务器地址 -->
  <!-- show-file-list：是否展示上传的文件列表 -->
  <!-- before-upload：在上传之前，指定一个对文件做校验的函数 -->
  <!-- http-request：自定义上传，当不使用 action 上传文件时，就需要使用 http-request 进行自定义上传-->
  <el-upload
    class="avatar-uploader"
    action=""
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-request="uploadImg"
  >
    <img v-if="value" :src="value" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
import COS from "cos-js-sdk-v5";
// 创建cos实例对象
const cos = new COS({
  SecretId: "AKIDTrDrkXSVR8rQlywdimtoV0GLPK2gU9cs",
  SecretKey: "MZcYJxPhq1NcmncOxa5NOK9uRnSwAF7v",
});

export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  // data() {
  //   return {
  //     imageUrl: "",
  //   };
  // },
  methods: {
    // 文件校验函数
    // return true 表示校验通过，继续上传文件
    // return false 表示校验不通过，停止文件上传
    beforeAvatarUpload(file) {
      // file：用户选择的文件
      console.log(file);
      // 文件校验需求
      // 文件类型：jpeg png gif bmp
      // 文件大小：5M
      const imageType = ["image/jpeg", "image/png", "image/gif", "image/bmp"];
      const isImage = imageType.includes(file.type);
      const isLt5M = file.size / 1024 / 1024 < 5; // 1M = 1024kb = 1024 * 1024 * b

      if (!isImage) {
        this.$message.error("上传头像图片只能是 JPG PNG GIF BMP 格式!");
      }
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }

      return isImage && isLt5M;
    },
    // 自定义上传，上传到腾讯云
    uploadImg(obj) {
      // obj.file：用户选择出来的图片
      const file = obj.file;
      // 腾讯云的上传图片代码
      cos.putObject(
        {
          Bucket: "zyyz-1312494575" /* 填入您自己的存储桶，必须字段 */,
          Region: "ap-beijing" /* 存储桶所在地域，例如ap-beijing，必须字段 */,
          Key: file.name /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
          Body: file /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */,
          onProgress: function (progressData) {
            // 上传进度
            console.log(JSON.stringify(progressData));
          },
        },
        (err, data) => {
          // 获取腾讯云返回的图片地址
          // console.log(data);
          if (data.statusCode === 200) {
            // this.imageUrl = `http://${data.Location}`;
            // 将上传后的图片地址传递给父组件
            this.$emit("input", `http://${data.Location}`);
          } else {
            this.$message.error("上传失败，请重试");
          }
        }
      );
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
